<template>
	<view style="background:#f5f5f5;">
		<view class="view-box">
			<p class="text-title">上传视频</p>
			<u-popup :show="show" mode="center">
				<view>
					<text>上传视频中...请稍后</text>
				</view>
			</u-popup>
			<u-upload
				:customStyle="{margin:'0 auto'}"
				style="margin: 0 auto;"
				:imageList="videoList"
				@afterRead="afterRead2"
				@delete="deletePic2"
				name="2"
				multiple
				:maxCount="10"
				accept="video"
			></u-upload>
		</view>
		<view class="view-box">
				<p class="text-title">上传图片</p>
				<u-upload
					:imageList="imageList"
					@afterRead="afterRead1"
					@delete="deletePic1"
					name="1"
					multiple
					:maxCount="10"
				></u-upload>
		</view>
		<view class="view-box" style="border:1px solid #f5f5f5">
			<u--textarea v-model="comment.content" placeholder="请输入内容" style="border:1px solid #f5f5f5"></u--textarea>
		</view>
		<view class="view-box">
			<u-row>
				<u-col span="4">
					<u--image :showLoading="true" 
					:src="'http://101.43.223.224:8765/image/getImageById?id='+(commodityData.imageId==null?'':commodityData.imageId.split(',')[0])"
					 width="100px" height="100px" @click="click"></u--image>
				</u-col>
				<u-col span="8">
					<p class="text-dark">{{commodityData.commodityName}}</p>
					<p class="text-light">{{commodityData.back}}</p>
				</u-col>
			</u-row>
		</view>
		<view class="view-box">
			<p class="text-title">商品描述评分</p>
			<u-rate count="5" v-model="comment.productDescriptionRating" active-color="#FF8888"></u-rate>
			<p class="text-title">卖家态度评分</p>
			<u-rate count="5" v-model="comment.sellerAttitudeRating" active-color="#FF8888"></u-rate>
			<p class="text-title">发货速度评分</p>
			<u-rate count="5" v-model="comment.shippingSpeedRating" active-color="#FF8888"></u-rate>
		</view>
		<view class="view-box">
			<u-button text="发表评论" color="#3CCCA6" @click="saveCommentFile()"></u-button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//图片列表
				imageList:[],
				//视频列表
				videoList:[],
				//评论
				comment:{
					 id:'',
					 userId:0,
					 commodityId:0,
					 content:'',
					 pictureGroup:[],
					 videoGroup:[],
					 productDescriptionRating:0,
					 sellerAttitudeRating:0,
					 shippingSpeedRating:0,
					 orderId:0
				},
				//商品信息
				commodityData:{},
				//
				show:false,
				// 存放图片组id
				avatar:'',
				// 存放视频组id
				videoA:'',
			}
		},
		watch:{
			videoA(newName, oldName){
				
				if(oldName !== newName){
					uni.showToast({
						title: '上传视频中成功',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'success',
					})
					this.show = false
				}
				var _this =  this
				setTimeout(function() {
				  //如果用户不上传图片和视频只写文字动态时
				  if(_this.imageList.length==0 && _this.videoList.length==0 && _this.content.content!==''){
					//新增商品评论
					_this.addComment()
				  }
				  // 或者用户上传图片不上传视频时
				  else if(_this.avatar!==''&& _this.videoList.length==0 || _this.videoA!==''&& _this.imageList.length==0){
					//新增商品评论
					_this.addComment()
				  }
				  // 或者用户上传动态时
				  else if(_this.videoA!==''&& _this.avatar!==''&& _this.content!=="" || _this.videoA!==''&& _this.avatar!==''&& _this.content==""){
					//新增商品评论
					_this.addComment()
				  }
				  // 用户内容，图片，视频都不上传时
				  else{
					alert("请输入要发布的内容")
				  }
				}, 500)
			}
		},
		methods: {
			//根据id查询当前商品
			getCommodityById() {
				this.$myRequest({
					url: '/commodity/detail/getCommodityById',
					data: {
						commodityId: this.comment.commodityId
					}
				}).then(res => {
					this.commodityData = res.data.data
				})
			},
			// 新增商品评论
			addComment(){
				this.comment.pictureGroup = this.avatar
				this.comment.videoGroup = this.videoA
				this.$myRequest({
					url:'/commodity/comment/addComment',
					method:'POST',
					data:this.comment,
					dataType:'json',
				}).then(res=>{
					if(res.data.flag){
						// 发布成功以后清空上传的视频，图片组，内容，和存放图片，视频的数组
						this.comment={
							 id:'',
							 userId:0,
							 commodityId:0,
							 content:'',
							 pictureGroup:[],
							 videoGroup:[],
							 productDescriptionRating:0,
							 sellerAttitudeRating:0,
							 shippingSpeedRating:0,
							 orderId:0
						}
						uni.showToast({
							title: '评论成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2500
						})
						// 跳转动态页面
						uni.navigateTo({
							url:'/pages/my/MyOrder'
						})
					}else{
						uni.showToast({
							title: '评论失败',
							icon: 'error',
							//显示持续时间为 2秒
							duration: 2500
						})
					}
					
				})
			},
			//上传商品评论文件
			saveCommentFile(){
				debugger
				var list = []
				var code = ''
				var videoCode = ''
				list.push(this.imageList)
				// 调用图片方法每个图片调用一次方法
				// 拼接返回图片id组
				this.imageList.forEach(item=>{
					uni.uploadFile({
						url: 'http://127.0.0.1:8088/trends/uploadImageAndVideo',
						filePath: item.thumb,
						name:'file',
						success: (res) => {
							code = JSON.parse(res.data)
							console.log(code)
							if(this.avatar == ''){
								this.avatar = code.data-0
							}
							if(this.avatar!==code.data-0){
								this.avatar = this.avatar+","+code.data
							}
							console.log(this.avatar)
						}
					})
				})
				// 图片上传完后，分批上传视频
				// 拼接返回视频id组
				let array =[...this.videoList]
				console.log(array)
				this.videoList.forEach(item=>{
					console.log(item.tempFile)
					uni.uploadFile({
						url: 'http://127.0.0.1:8088/trends/uploadImageAndVideo',
						filePath : item.url,
						name:"file",
						success: (res) => {	
							videoCode = JSON.parse(res.data)
							this.videoA = videoCode.data-0
							console.log(this.videoA)
						}
					})
				})
				var _this = this
				setTimeout(function() {
					if (_this.videoList.length!==0 && _this.videoA== ""){
						_this.show = true
					}
				}, 2000)
			},
			deletePic1 (a) {
				this.videoList.splice(a.index, 1)
			},
			// 新增图片
			async afterRead1(event) {
				debugger
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`imageList`].length
				lists.map((item) => {
					this[`imageList`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					let item = this[`imageList`][fileListLen]
					this[`imageList`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
					}))
					fileListLen++
				}
			},
			// 删除图片
			deletePic1(event) {
				this[`imageList`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead2(event) {
				debugger
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`videoList`].length
				lists.map((item) => {
					this[`videoList`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					let item = this[`videoList`][fileListLen]
					this[`videoList`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
					}))
					fileListLen++
				}
			},
			// 删除图片
			deletePic2(event) {
				this[`videoList`].splice(event.index, 1)
			},
		},
		onLoad(option) {
			this.comment.commodityId = option.commodityId
			this.comment.orderId = option.orderId
			this.comment.userId = wx.getStorageSync('user').id
			this.getCommodityById()
		}
	}
</script>

<style lang="scss" scoped>
/**
	 * 公共样式 ↓
	 */
	.view-box {
		line-height: 24px;
		background: #fff;
		padding: 16px 10px;
		margin-bottom: 6px;
	}
	.text-title {
		//文字标题样式
		font-size: 14px;
		color: #333333;
		font-weight: bold;
	}

	.text-dark {
		//深色文字样式
		font-size: 14px;
		color: #666666;
	}

	.text-light {
		//浅色文字样式
		font-size: 14px;
		color: #999999;
	}

	.text-center {
		//居中文字样式
		text-align: center;
	}

</style>
